<template>
	<view class="info">
		<u--form labelPosition="left" :model="from" :rules="rules" ref="uForm">
			<u-form-item label="姓名" prop="userInfo.username" borderBottom ref="item1">
				<u--input style="margin-left: 30px;" :disabled="show" v-model="from.userInfo.username" border="none"
					:disabledColor="color" placeholder="请输入姓名"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="userInfo.gender" borderBottom ref="item1" class="remove">
				<u-radio-group v-if="!show" v-model="from.userInfo.gender==1?'男':'女'" placement="row"
					@change="groupChange">
					<u-radio v-for="(item, index) in radiolist1" :key="index" :label="item.name" :name="item.name">
					</u-radio>
				</u-radio-group>
				<u--input v-else style="margin-left: 30px;" v-model="from.userInfo.gender==1?'男':'女'" border="none"
					:disabled="show" :disabledColor="color"></u--input>
			</u-form-item>
			<u-form-item label="年龄" prop="userInfo.age" borderBottom ref="item1" :class="!show?'remove':''">
				<u--input :disabled="show" :disabledColor="color" type="number" maxlength="3" placeholder="请输入年龄"
					style="margin-left: 30px;" v-model="from.userInfo.age" border="none"></u--input>
			</u-form-item>
			<u-form-item label="一寸照" prop="userInfo.one_inch_photo" borderBottom ref="item1" class="remove">
				<u-upload style="margin-left: 30px;" v-if="!show" :fileList="fileList4" @afterRead="afterRead4"
					name="file" :maxCount="1" :multiple="false">
					<u--image v-if="from.userInfo.one_inch_photo" :showLoading="true"
						:src=" IMG_URL+ from.userInfo.one_inch_photo" width="80px" height="80px"
						mode="widthFix"></u--image>
					<view style="margin-left: 30px;" v-else class="tupian">
						<span>请上传</span>
						<span>一寸照</span>
					</view>
				</u-upload>
				<u--image style="margin-left: 30px;" v-else :showLoading="true"
					:src=" IMG_URL+ from.userInfo.one_inch_photo" width="80px" height="80px" mode="widthFix"></u--image>
			</u-form-item>
			<u-form-item label="手机号" prop="userInfo.mobile" borderBottom ref="item1" :class="!show?'remove':''">
				<u--input :disabled="show" :disabledColor="color" type="number" maxlength="11"
					style="margin-left: 30px;" v-model="from.userInfo.mobile" border="none"></u--input>
			</u-form-item>
			<u-form-item v-if="!show" label="验证码" prop="userInfo.code" borderBottom ref="item1">
				<u--input :disabled="show" :disabledColor="color" type="number" maxlength="6" style="margin-left: 30px;"
					v-model="from.userInfo.code" border="none" placeholder="请输入验证码"></u--input>
				<view class="sendCode c-00 f-26" @click="onGetCode()">
					{{ countdown > 0 ? '再次发送('+countdown+')' : '立即发送' }}
				</view>
			</u-form-item>
			<u-form-item label="身份证号" prop="userInfo.id_card" borderBottom ref="item1" class="remove">
				<u--input :disabled="show" :disabledColor="color" type="number" maxlength="18"
					style="margin-left: 30px;" v-model="from.userInfo.id_card" border="none"
					placeholder="请输入身份证号"></u--input>
			</u-form-item>
			<u-form-item label="出生日期" prop="userInfo.birthday" borderBottom ref="item1" class="remove">
				<picker v-if="!show" mode="date" @change="bindDateChange">
					<view style="margin-left: 30px;" class="uni-input" :class="from.userInfo.birthday?'':'huise'">
						{{from.userInfo.birthday||'请选择出生日期'}}
					</view>
				</picker>
				<u--input v-else :disabled="show" :disabledColor="color" style="margin-left: 30px;"
					v-model="from.userInfo.birthday" border="none"></u--input>
			</u-form-item>
			<u-form-item label="籍贯" prop="userInfo.native_place" borderBottom ref="item1" class="remove"
				@click="city();">
				<view v-if="!show" style="margin-left: 30px;" class="uni-input" border="none"
					:class="from.userInfo.native_place?'':'huise'">
					{{from.userInfo.native_place ||'请选择籍贯'}}
				</view>
				<u--input v-else :disabled="show" :disabledColor="color" type="text" style="margin-left: 30px;"
					v-model="from.userInfo.native_place" border="none"></u--input>
				<u-picker :columns="cityList" @change="placeChange" @cancel="cityShow = false" @confirm="confirm"
					:show="cityShow">
				</u-picker>
			</u-form-item>
			<u-form-item label="现住址" prop="userInfo.address" borderBottom ref="item1">
				<u--input :disabled="show" :disabledColor="color" style="margin-left: 30px;"
					v-model="from.userInfo.address" border="none" placeholder="请输入现住址"></u--input>
			</u-form-item>
			<u-form-item label="工作单位" prop="userInfo.work_unit" borderBottom ref="item1" class="remove">
				<u--input :disabled="show" :disabledColor="color" style="margin-left: 30px;"
					v-model="from.userInfo.work_unit" border="none" placeholder="请输入工作单位"></u--input>
			</u-form-item>
			<u-form-item label="单位联系人" prop="userInfo.linkman" borderBottom ref="item1" class="remove">
				<u--input :disabled="show" :disabledColor="color" style="margin-left: 30px;"
					v-model="from.userInfo.linkman" border="none" placeholder="请输入单位联系人"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" prop="userInfo.linkman_phone" borderBottom ref="item1">
				<u--input :disabled="show" :disabledColor="color" style="margin-left: 30px;" type="number"
					v-model="from.userInfo.linkman_phone" border="none" placeholder="请输入联系电话"></u--input>
			</u-form-item>
			<u-form-item label="工种" prop="userInfo.work_type" borderBottom ref="item1" class="remove"
				@click="workTypeShow();">
				<view v-if="!show" style="margin-left: 30px;" border="none" :class="from.userInfo.work_type?'':'huise'">
					{{ from.userInfo.type.name ||"请选择工种"}}
				</view>
				<u--input v-else :disabled="true" :disabledColor="color" style="margin-left: 30px;"
					v-model="from.userInfo.type.name" border="none"></u--input>
				<u-picker :show="showType" :columns="workTypeList" keyName="name" @cancel="showType = false"
					@confirm="workTypeConfirm"></u-picker>
			</u-form-item>
			<u-form-item label="负责人" prop="userInfo.work_type" borderBottom ref="item1" class="remove">
				<u--input :disabled="true" :disabledColor="color" style="margin-left: 30px;"
					v-if="from.userInfo.work_type" v-model="from.userInfo.type.directors.username"
					border="none"></u--input>
			</u-form-item>
			<u-form-item label="安全管理人" prop="userInfo.work_type" borderBottom ref="item1">
				<u--input :disabled="true" :disabledColor="color" style="margin-left: 30px;"
					v-if="from.userInfo.work_type" v-model="from.userInfo.type.managers.username"
					border="none"></u--input>
			</u-form-item>
			<view class="image-box">
				<view class="">
					<u-upload v-if="!show" :fileList="fileList1" @afterRead="afterRead" name="file" :maxCount="1"
						:multiple="false">
						<u--image v-if="from.userInfo.id_card_front" :showLoading="true"
							:src=" IMG_URL+ from.userInfo.id_card_front" width="80px" height="80px"
							mode="widthFix"></u--image>
						<view v-else class="tupian">
							<span>身份证</span>
							<span>国徽面</span>
						</view>
					</u-upload>
					<u--image v-else :showLoading="true" :src=" IMG_URL+ from.userInfo.id_card_front" width="80px"
						height="80px" mode="widthFix"></u--image>
				</view>
				<view class="">
					<u-upload v-if="!show" :fileList="fileList2" @afterRead="afterRead2" name="file" :maxCount="1"
						:multiple="false">
						<u--image v-if="from.userInfo.id_card_back" :showLoading="true"
							:src=" IMG_URL+ from.userInfo.id_card_back" width="80px" height="80px"
							mode="widthFix"></u--image>
						<view v-else class="tupian">
							<span>身份证</span>
							<span>人像面</span>
						</view>
					</u-upload>
					<u--image v-else :showLoading="true" :src=" IMG_URL+ from.userInfo.id_card_back" width="80px"
						height="80px" mode="widthFix"></u--image>
				</view>
				<view class="">
					<u-upload v-if="!show" :fileList="fileList3" @afterRead="afterRead3" name="file" :maxCount="1"
						:multiple="false">
						<u--image v-if="from.userInfo.education" :showLoading="true"
							:src=" IMG_URL+ from.userInfo.education" width="80px" height="80px"
							mode="widthFix"></u--image>
						<view v-else class="tupian">
							<span>学历</span>
							<span>证明</span>
						</view>
					</u-upload>
					<u--image v-else :showLoading="true" :src=" IMG_URL+ from.userInfo.education" width="80px"
						height="80px" mode="widthFix"></u--image>
				</view>
			</view>
			<view v-if="!show" class="button-box">
				<u-button v-if="from.userInfo.state == 0" type="primary" :plain="true" text="确认" style="width: 100px;"
					@click="submit()" iconColor="#e8f0fe"></u-button>
				<u-button v-if="from.userInfo.state == 0" type="primary" :plain="true" text="取消" style="width: 100px;"
					@click="cancelBun()" iconColor="#e8f0fe"></u-button>
				<view class="" v-if="from.userInfo.state == 1">
					您已提交过,请等待审核
				</view>
			</view>
		</u--form>

	</view>

	</view>
</template>

<script>
	import {
		IMG_URL,
	} from "@/config/app.js";
	import cityData from '@/utlis/city.js'
	import {
		getInformation,
		getWokeType,
		uploadImage,
		sendCode,
		uploadInformation
	} from "@/api/my.js";
	export default {
		name: 'info',
		props: {
			show: {
				type: Boolean,
				default: true
			},
			// info: Object,
		},
		data() {
			return {
				IMG_URL: IMG_URL,
				name: 'name',
				showType: false,
				color: '#e8f0fe',
				from: {
					userInfo: {
						username: '',
						code: '',
						type: {
							name: '',
							directors: {
								username: ''
							},
							managers: {
								username: ''
							}
						},
						state: 0,
						id_card: null,
						birthday: null,
						native_place: null,
						address: null,
						work_unit: null,
						linkman_phone: null,
						linkman: null,
						one_inch_photo: null,
					}
				},
				countdown: 0, //倒计时
				phonekey: "", //获取验证码返回的
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
					{
						name: '保密',
					},
				],
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.age': {
						type: 'string',
						required: true,
						message: '请填写年龄',
						trigger: ['blur', 'change']
					},
					'userInfo.mobile': [{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入符合规则的手机号'
						},
					],
					'userInfo.id_card':  [{
							type: 'string',
							required: true,
							message: '请填写身份证号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入符合规则的身份证号'
						},
					],
					'userInfo.birthday': {
						type: 'string',
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', 'change']
					},
					'userInfo.native_place': {
						type: 'string',
						required: true,
						message: '请选择籍贯',
						trigger: ['blur', 'change']
					},
					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请填写现住址',
						trigger: ['blur', 'change']
					},
					'userInfo.work_unit': {
						type: 'string',
						required: true,
						message: '请填写工作单位',
						trigger: ['blur', 'change']
					},
					'userInfo.linkman': {
						type: 'string',
						required: true,
						message: '请填写单位联系人',
						trigger: ['blur', 'change']
					},
					'userInfo.linkman_phone': [{
							type: 'string',
							required: true,
							message: '请填写联系电话',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '请输入符合规则的手机号'
						},
					],
					'userInfo.one_inch_photo': {
						type: 'string',
						required: true,
						message: '请上传一寸照',
						trigger: ['blur', 'change']
					},
					'userInfo.id_card_front': {
						type: 'string',
						required: true,
						message: '请上传身份证国徽面',
						trigger: ['blur', 'change']
					},
					'userInfo.id_card_back': {
						type: 'string',
						required: true,
						message: '请上传身份证人像面',
						trigger: ['blur', 'change']
					},
					'userInfo.education': {
						type: 'string',
						required: true,
						message: '请上传身份证国徽面',
						trigger: ['blur', 'change']
					},

				},
				radiolist1: [{
						name: '男',
						disabled: false,
						value: 1
					},
					{
						name: '女',
						disabled: false,
						value: 0
					}
				],
				workTypeList: [],
				cityList: [],
				cityShow: false,
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				director: {},
				manager: {},
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],

			}
		},
		onReady() {
			if (!this.show) {
				this.$refs.uForm.setRules(this.rules)
			}
		},
		created() {
			this.workType();
			this.getinfo()
			this.initCityData();
			console.log(this.cityList, '9999999999');
		},
		mounted() {
			// this.initCityData()
		},
		methods: {
			cancelBun() {
				uni.navigateBack()
			},
			async submit() {
				if (!this.from.userInfo.code) {
					uni.showToast({
						'icon': 'none',
						'title': '请输入验证码',
						'duration': 1500
					})
				} else if (!this.from.userInfo.id_card_front) {
					uni.showToast({
						'icon': 'none',
						'title': '请上传身份证国徽面',
						'duration': 1500
					})
					return
				} else if (!this.from.userInfo.education) {
					uni.showToast({
						'icon': 'none',
						'title': '请上传学历证明',
						'duration': 1500
					})
					return
				} else if (!this.from.userInfo.id_card_back) {
					uni.showToast({
						'icon': 'none',
						'title': '请上传身份证人像面',
						'duration': 1500
					})
					return
				} else if (!this.from.userInfo.work_type) {
					uni.showToast({
						'icon': 'none',
						'title': '请选择工种',
						'duration': 1500
					})
					return
				}
				console.log(this.from.userInfo, '提交审核');
				this.from.userInfo['phoneKey'] = this.phonekey
				await this.$refs.uForm.validate()
					.then(res => {
						uploadInformation(this.from.userInfo).then(res => {
							uni.showToast({
								'icon': 'none',
								'title': res.msg,
								'duration': 1500
							})
							if (res.code == 1) {
								
								setTimeout(() => {
									uni.navigateBack()
								}, 1500);
							}
							
						});
					})

			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(e) {
				console.log(e);
				const res = await uploadImage(e.file.url)
				this.from.userInfo.id_card_front = res.data.url
			},
			async afterRead2(e) {
				console.log(e);
				const res = await uploadImage(e.file.url)
				this.from.userInfo.id_card_back = res.data.url
			},
			async afterRead3(e) {
				console.log(e);
				const res = await uploadImage(e.file.url)
				this.from.userInfo.education = res.data.url
			},
			async afterRead4(e) {
				console.log(e);
				const res = await uploadImage(e.file.url)
				this.from.userInfo.one_inch_photo = res.data.url
			},
			city() {
				console.log(this.show);
				if (!this.show) {
					this.cityShow = true
				}
			},
			workTypeShow() {
				if (!this.show) {
					this.showType = true
				}
			},
			async getinfo() {
				await getInformation().then(res => {
					console.log('获取个人信息', res);
					this.from.userInfo = res.data
					console.log(this.from.userInfo);
				});
			},
			async workType() {
				await getWokeType().then(res => {

					this.workTypeList.push(res.data)
					console.log('获取工种列表', this.workTypeList);
				});
			},
			groupChange(n) {
				console.log(n);
				if (n == "女") {
					this.from.userInfo.gender = 0
				} else {
					this.from.userInfo.gender = 1
				}
			},
			workTypeConfirm(e) {
				let value = e.value[0]
				console.log(value);
				this.from.userInfo.type.name = value.name
				this.from.userInfo.work_type = value.id
				this.from.userInfo.type = value
				this.showType = false
			},
			async onGetCode() {
				console.log(11111);
				if (this.countdown > 0) return
				await sendCode({
					'mobile': this.from.userInfo.mobile
				}).then(res => {
					if (res.code == 1) {
						this.phonekey = res.data
						uni.showToast({
							'icon': 'none',
							'title': res.msg,
							'duration': 1500
						})
						this.startCountdown()
					}
				});
			},
			/**
			 * 倒计时
			 */
			startCountdown() {
				this.countdown = 60;
				const countdownInterval = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(countdownInterval);
					}
				}, 1000);
			},
			bindDateChange(e) {
				this.from.userInfo.birthday = e.detail.value
			},
			placeChange(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},
			// 单击确认按钮时执行
			confirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.from.userInfo.native_place = e.value[0] + '/' +
					e.value[1] + '/' +
					e.value[2]
				// 隐藏城市选择器
				this.cityShow = false;
			},
			initCityData() {

				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);

					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;

					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
				console.log(this.cityList, '---------');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.info {
		background-color: #e8f0fe;
		width: 85%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		// justify-content: space-around;
	}

	/deep/.u-radio {
		margin-bottom: 0 !important;
		margin-left: 30px;
		margin-right: 10px;
	}

	/deep/.u-form-item__body__left {
		width: 100px !important;

	}

	/deep/.remove {
		.u-line {
			display: none;
		}
	}

	.image-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		// margin-top: 20px;
	}

	.button-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}

	.tupian {
		width: 80px;
		height: 80px;
		border: 1px #d5d5d6 solid;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.huise {
		color: #c0c4cc;
	}
</style>